<template>
	<view>
		<uv-navbar :title="title" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIcon="close" leftIconSize="18px"
			leftIconColor="#000000" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />

		<scroll-view :scroll-x="true" class="filter_scroll">
			<view class="flex-row flex-items-center" style="height: 100%; ">
				<view v-for="(item,index) in selectedDatas" :key="index" class="filter_scroll__item">
					<text style="white-space: nowrap; margin-right: 6px;">{{ item.name }}</text>
					<!-- <uv-icon name="close" size="12px" color="#6B7885"></uv-icon> -->
				</view>
			</view>
		</scroll-view>

		<uv-vtabs :list="list" keyName="name" :height="scrollHeight" barWidth="110px" barBgColor="#F3F5FB"
			:barItemStyle="barItemStyle" :barItemActiveStyle="barItemActiveStyle"
			:barItemActiveLineStyle="barItemActiveLineStyle">
			<template v-for="(item,index) in list" :key="index">
				<uv-vtabs-item :index="index">

					<view class="flex-column" v-for="(item2,index2) in item.sons" :key="index2">
						<view class="flex-row flex-items-center flex-between"
							style="height: 48px; padding-left: 12px; padding-right: 12px;">
							<text class="font-weight-medium font-16" style="color: #313C56;">{{item2.name}}</text>
							<view v-if="item2.name == '任务类别' || item2.name == '任务地区'" class="flex-row flex-items-center"
								@click="intoFilterTask(item2.name)">
								<text style="color: #6B7885; font-size: 12px;">全部</text>
								<image src="../../static/arrow-right.png" style="width: 12px; height: 12px;"></image>
							</view>
						</view>
						<view class="flex-row flex-wrap">
							<view v-for="(item3,index3) in item2.sons" :key="index3"
								:class="['filter-item', item3.select && 'filter-item_active'] "
								@click="tapIndex(index, index2, index3)">
								{{ item3.name }}
							</view>
						</view>
						<view v-if="item2.name == '任务金额'" class="flex-row flex-items-center flex-between"
							style="height: 32px;  margin-left: 12px; margin-right: 12px; margin-bottom: 12px;">
							<view class="" style="width: 110px;">
								<uv-input v-model="lowerLimit" inputAlign="center" type="number" placeholder="自定最低价"
									placeholderStyle="color: #B7C0CA; fontSize: 12px;" fontSize="12px" color="#EB7520"
									border="none"
									:customStyle="{height: '32px', backgroundColor: '#F7F9FD'}"></uv-input>
							</view>
							<view style="width: 10px; height: 1px; background-color: blue;">
							</view>
							<view class="" style="width: 110px;">
								<uv-input v-model="upperLimit" inputAlign="center" type="number" placeholder="自定最高价"
									placeholderStyle="color: #B7C0CA; fontSize: 12px;" fontSize="12px" color="#EB7520"
									border="none"
									:customStyle="{height: '32px', backgroundColor: '#F7F9FD'}"></uv-input>
							</view>
						</view>
					</view>
				</uv-vtabs-item>
			</template>
		</uv-vtabs>

		<view class="filter-toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">
			<view class="flex-row flex-items-center flex-center" style="height: 68px; ">
				<view class="filter-toolbar__reset flex-row-center" @click="reset">
					重置
				</view>
				<view class="filter-toolbar__confirm flex-row-center" @click="confirm()">
					确定
				</view>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getClassify,
		getArea
	} from "@/api/index.js"
	export default {
		data() {
			return {
				title: '筛选',
				lowerLimit: '',
				upperLimit: '',
				selectedDatas: [],
				list: [{
						name: '任务来源',
						sons: [{
							name: '任务来源',
							sons: [{
								name: '不限',
								id: 0,
								key: 'bossType'
							}, {
								name: '公司',
								id: 1,
								key: 'bossType'
							}, {
								name: '团队',
								id: 2,
								key: 'bossType'
							}, {
								name: '个人',
								id: 3,
								key: 'bossType'
							}]
						}]
					}, {
						name: '发布时间',
						sons: [{
							name: '发布时间',
							sons: [{
								name: '不限',
								id: 0,
								key: 'createTime'
							}, {
								name: '一天内',
								id: 1,
								key: 'createTime'
							}, {
								name: '一周内',
								id: 2,
								key: 'createTime'
							}, {
								name: '一月内',
								id: 3,
								key: 'createTime'
							}]
						}]
					}, {
						name: '信用等级',
						sons: [{
							name: '信用等级',
							sons: [{
								name: '不限',
								id: 0,
								key: 'bossLevel'
							}, {
								name: '一级',
								id: 1,
								key: 'bossLevel'
							}, {
								name: '二级',
								id: 2,
								key: 'bossLevel'
							}, {
								name: '三级',
								id: 3,
								key: 'bossLevel'
							}, {
								name: '四级',
								id: 4,
								key: 'bossLevel'
							}, {
								name: '五级',
								id: 5,
								key: 'bossLevel'
							}]
						}]
					},
					{
						name: '任务类别',
						sons: [{
							name: '任务类别',
							sons: []
						}]
					},
					{
						name: '任务金额',
						sons: [{
							name: '任务金额',
							sons: [{
								name: '不限',
								id: 0,
								key: 'byAmount'
							}, {
								name: '从高到低',
								id: 1,
								key: 'byAmount'
							}, {
								name: '从低到高',
								id: 2,
								key: 'byAmount'
							}]
						}]
					}, {
						name: '任务地区',
						sons: [{
							name: '任务地区',
							sons: []
						}]
					}
				],
				barItemStyle: {
					color: '#313C56',
					fontSize: '14px'
				},
				barItemActiveLineStyle: {
					background: '#EB7520',
					height: '20px',
					width: '4px',
					marginTop: '19px'
				},
				barItemActiveStyle: {
					color: '#EB7520',
					fontSize: '14px',
					fontWeight: 500
				},
				// 上个界面传过来的数据
				oldObj: {},
				// 地区的原始数据
				areaList: []
			};
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 48
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad(info) {
			console.log(info)
			this.oldObj = info
			if (info.sid != '0') {
				this.getClassifyDatas()
			}
			if (info.areaId != '0') {
				this.getAreaDatas(1)
			}
			this.processLastPageData()
		},
		methods: {
			/**
			 * 处理上个页面传过来的数据
			 */
			processLastPageData() {
				if (this.oldObj.bossType != '0') {
					this.list[0].sons[0].sons[parseInt(this.oldObj.bossType)].select = true
				}
				if (this.oldObj.createTime != '0') {
					this.list[1].sons[0].sons[parseInt(this.oldObj.createTime)].select = true
				}
				if (this.oldObj.bossLevel != '0') {
					this.list[2].sons[0].sons[parseInt(this.oldObj.bossLevel)].select = true
				}
				if (this.oldObj.byAmount != '0') {
					this.list[4].sons[0].sons[parseInt(this.oldObj.byAmount)].select = true
				}
				if (this.oldObj.lowerLimit != '0') {
					this.lowerLimit = this.oldObj.lowerLimit
				}
				if (this.oldObj.upperLimit != '0') {
					this.upperLimit = this.oldObj.upperLimit
				}

			},
			/**
			 * 获取分类数据
			 */
			getClassifyDatas() {
				getClassify().then((data) => {
					this.$nextTick(() => {
						this.formatData(data)
					})
				}).catch((err) => {})
			},
			/**
			 * 处理分类数据
			 * @param {Object} data 分类原数据
			 */
			formatData(data) {
				let list = []
				let tempList1 = uni.$uv.deepClone(data)
				for (var i = 0; i < tempList1.length; i++) {
					let sons = tempList1[i].sons
					for (var j = 0; j < sons.length; j++) {
						let id = sons[j].id
						if (this.classifySelectType(id)) {
							sons[j].key = 'sid'
							sons[j].select = true
							list.push(sons[j])
						}
					}
				}
				this.list[3].sons[0].sons = list
				this.querySelectedItems()
			},
			classifySelectType(id) {
				if (!this.oldObj.sid || this.oldObj.sid == '0') {
					return false
				}
				console.log(JSON.stringify(this.oldObj))
				let list = this.oldObj.sid.split(',')
				return list.indexOf(`${id}`) >= 0
			},
			/**
			 * 重置
			 */
			reset() {
				for (var i = 0; i < this.selectedDatas.length; i++) {
					this.selectedDatas[i].select = false
				}
				this.lowerLimit = ''
				this.upperLimit = ''
				this.selectedDatas = []
				this.title = '筛选'
				this.confirm()
			},
			/**
			 * 确定
			 */
			confirm() {
				// if (this.selectedDatas.length == 0) {
				// 	this.$refs.toast.show('请选择筛选条件')
				// 	return
				// }
				// console.log(JSON.stringify(this.selectedDatas))

				let filterObj = {
					bossType: '0',
					createTime: '0',
					byAmount: '0',
					lowerLimit: this.$tools.empty(this.lowerLimit, '0'),
					upperLimit: this.$tools.empty(this.upperLimit, '0'),
					bossLevel: '0',
					sid: '0',
					areaId: '0',
				}
				let bossLevels = [],
					sids = [],
					areaIds = [];
				for (let i = 0; i < this.selectedDatas.length; i++) {
					let item = this.selectedDatas[i]
					if (item.key == 'bossType') {
						filterObj.bossType = item.id
					} else if (item.key == 'createTime') {
						filterObj.createTime = item.id
					} else if (item.key == 'byAmount') {
						filterObj.byAmount = item.id
					} else if (item.key == 'bossLevel') {
						bossLevels.push(item.id)
					} else if (item.key == 'sid') {
						sids.push(item.id)
					} else if (item.key == 'areaId') {
						areaIds.push(item.id)
					}
				}

				if (bossLevels.length != 0) {
					filterObj.bossLevel = bossLevels.join(',')
				}

				if (sids.length != 0) {
					filterObj.sid = sids.join(',')
				}
				if (areaIds.length != 0) {
					filterObj.areaId = areaIds.join(',')
				}
				let filterParams = uni.$uv.deepClone(filterObj)
				// console.log(JSON.stringify(filterObj))
				this.$nextTick(() => {
					// this.getOpenerEventChannel().emit('filterEnd', filterParams)
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.updateFilterObj(filterParams)
					uni.navigateBack()
				})
			},
			/**
			 * 进入筛选任务分类
			 */
			intoFilterTask(name) {
				let index = name == '任务类别' ? 3 : 5
				let type = name == '任务类别' ? 'class' : 'area'
				let ids = []
				for (var i = 0; i < this.list[index].sons[0].sons.length; i++) {
					ids.push(this.list[index].sons[0].sons[i].id)
				}
				uni.navigateTo({
					url: `/pages/filter/filter-task?ids=${ids}&type=${type}`,
					events: {
						filterTaskEnd: data => {
							console.log(data)
							for (var i = 0; i < data.length; i++) {
								data[i].key = index == 3 ? 'sid' : 'areaId'
							}
							this.list[index].sons[0].sons = data
							this.querySelectedItems()
						}
					}
				})
			},
			/**
			 *  获取地区数据
			 */
			getAreaDatas(type) {
				getArea({
					city: '',
					type: type
				}).then((data) => {
					this.formatAreaDatas(data, type == 2)
				}).catch(() => {})
			},
			/**
			 * 处理地区接口数据
			 */
			formatAreaDatas(data, isAbroad) {
				let list = []
				for (var i = 0; i < data.length; i++) {
					for (var j = 0; j < data[i].areaVo.length; j++) {
						const area = data[i].areaVo[j]
						const item = {
							name: area.city,
							id: area.id,
							key: 'areaId'
							// select: this.areaSelectType(area.id)
						}
						list.push(item)
					}
				}
				this.areaList = this.areaList.concat(list)
				if (isAbroad) {
					console.log(this.areaList)
					let selectedAreas = []
					for (let i = 0; i < this.areaList.length; i++) {
						const area = this.areaList[i]
						if (this.areaSelectType(area.id)) {
							area.select = true
							selectedAreas.push(area)
						}
					}
					let areaObj = {
						name: '任务地区',
						sons: [{
							name: '任务地区',
							sons: selectedAreas
						}]
					}
					this.list[5] = areaObj
					this.querySelectedItems()

				} else {
					this.getAreaDatas(2)
				}

			},
			/**
			 * 处理从列表进来的地区数据，设置选中状态
			 */
			areaSelectType(id) {
				if (this.oldObj.areaId == '0') {
					return false
				}
				let areas = this.oldObj.areaId.split(',')
				return areas.indexOf(`${id}`) >= 0
			},

			/**
			 *  点击item
			 */
			tapIndex(index, index2, index3) {
				if (this.list[index].name == '任务类别' || this.list[index].name == '任务地区') {
					return
				}
				let sons = uni.$uv.deepClone(this.list[index].sons[index2].sons)
				let currenStatus = !sons[index3].select
				for (var i = 0; i < sons.length; i++) {
					if (i == index3) {
						sons[i].select = currenStatus
					} else {
						sons[i].select = false
					}
				}
				this.list[index].sons[index2].sons = sons

				this.querySelectedItems()
			},
			/**
			 * 查找已选中的分类
			 */
			querySelectedItems() {
				let selectedDatas = []
				for (var i = 0; i < this.list.length; i++) {

					for (let j = 0; j < this.list[i].sons.length; j++) {
						for (let k = 0; k < this.list[i].sons[j].sons.length; k++) {
							let item = this.list[i].sons[j].sons[k]
							if (item.select) {
								selectedDatas.push(item)
							}
						}
					}
				}
				this.selectedDatas = selectedDatas
				this.title = selectedDatas.length == 0 ? '筛选' : `筛选 - ${this.selectedDatas.length}`
			}
		}
	}
</script>

<style lang="scss">
	.filter-item {
		width: calc((100vw - 147px) / 2.0);
		height: 32px;
		background: #F7F9FD;
		border-radius: 6px;
		margin-left: 12px;
		margin-bottom: 12px;
		color: #6B7885;
		font-size: 12px;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;

		&_active {
			background: #FFF9F6;
			color: #EB7520;
			border: 1px solid #EB7520;
		}
	}

	.filter_scroll__item {
		padding: 8px 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFF9F6;
		margin-left: 12px;
		border-radius: 6px;
		color: #313C56;
		font-size: 12px;
		font-weight: 400;
	}

	.filter_scroll {
		height: 48px;
		width: calc(100vw - 12px);
		border-bottom-color: #F3F5FB;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

	.filter-toolbar__confirm {
		margin-left: 15px;
		color: white;
		border-radius: 8px;
		background-color: #EB7520;
		height: 44px;
		width: 215px;
	}

	.filter-toolbar__reset {
		color: #313C56;
		border-radius: 8px;
		border: 1px solid #D4D7DB;
		height: 44px;
		width: 72px;
	}

	.filter-toolbar {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100vw;
		background-color: white;
		font-size: 16px;
		font-weight: 400;
		border-top-color: #F3F5FB;
		border-top-width: 1px;
		border-top-style: solid;
	}
</style>